import React , {useEffect,useRef}from "react";
import * as echarts from 'echarts'
import { px } from "../shared/px";
import { baseChartOption } from "../shared/base-chart-option";
import { createChartOption } from "../shared/create-chart-option";
export const Chart2 = () => {
    const divRef = useRef(null);
    const myChart = useRef(null);
    const data = [
      {name: '城关区公安局', 2011: 2, 2012: 3},
      {name: '七里河区公安局', 2011: 2, 2012: 3},
      {name: '西固区公安局', 2011: 2, 2012: 3},
      {name: '安宁区公安局', 2011: 2, 2012: 3},
      {name: '红古区公安局', 2011: 2, 2012: 3},
      {name: '永登县公安局', 2011: 2, 2012: 3},
      {name: '皋兰县公安局', 2011: 2, 2012: 3},
      {name: '榆中县公安局', 2011: 2, 2012: 3},
      {name: '新区公安局', 2011: 2, 2012: 3},
    ];
    useEffect(() => {
      setInterval(() => {
        const newData = [
          {name: '城关区公安局', 2011: 2, 2012: Math.random() * 10},
          {name: '七里河区公安局', 2011: 2, 2012: 3},
          {name: '西固区公安局', 2011: 2, 2012: 3},
          {name: '安宁区公安局', 2011: 2, 2012: 3},
          {name: '红古区公安局', 2011: 2, 2012: 3},
          {name: '永登县公安局', 2011: 2, 2012: 3},
          {name: '皋兰县公安局', 2011: 2, 2012: 3},
          {name: '榆中县公安局', 2011: 2, 2012: 3},
          {name: '新区公安局', 2011: 2, 2012: 3},
        ];
        x(newData)
      }, 1000);
    });
  const  x = (data) => {
    myChart.current.setOption(createChartOption({
      ... baseChartOption,
    grid: {
        containLabel: true,
        x: px(2),
        y:px(20),
        x2: px(20),
        y2: px(20)
      },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        splitLine: { show: false},
        axisLabel: {show: false},
      },
      yAxis: {
        type: 'category',
        axisTick: {show: false},
        data: data.map(i => i.name),
        axisLabel: {
            formatter(val) {
                return val.replace('公安局','\n公安局')
            }
          },
      },
      series: [
        {
          name: '破案排名',
          type: 'bar',
          data: data.map(i => i[2011]),
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0 , 0 , 1 , 0, [{
                offset: 0,
                color: '#1f33fa'
              }, {
                offset: 1,
                color: '#0798fb'
              }])
            }
          }
        },
        {
          name: '破案数量',
          type: 'bar',
          data: data.map(i => i[2012]),
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0 , 0 , 1 , 0, [{
                offset: 0,
                color: '#bb26e8'
              }, {
                offset: 1,
                color: '#626dde'
              }])
            }
          }
        }
      ]
    }))
  }
  useEffect(() => {
    myChart.current = echarts.init(divRef.current);  
    x(data);
  }, []);
    return(
        <div className='bordered 破获排名'>
            <h2>案件破获排名</h2>
            <div ref={divRef} className='charts' />
            <div className="legend">
              <span className="first"/> 破案排名1
              <span className="second"/> 破案排名1
            </div>
            
          </div>
    )
}